<template>
  <div class="app-container"  ref="appcontainer">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain size="mini" @click="handleAdd"
          >新增</el-button
        >
      </el-col>
    </el-row>
    <el-table v-loading="loading" :height="tableHeight" :data="list">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="id" align="center" prop="id" />
      <el-table-column label="手型" align="center" prop="name" />

      <el-table-column label="大图" align="center" prop="productImage">
        <template width="120" slot-scope="scope">
          <img
            style="width: 60px; height: 60px; border: none"
            :src="scope.row.img1"
          />
        </template>
      </el-table-column>
      <el-table-column label="小图" align="center" prop="productImage">
        <template width="120" slot-scope="scope">
          <img
            style="width: 60px; height: 60px; border: none"
            :src="scope.row.img2"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleEdit(scope.row)"
            >修改</el-button
          >

          <el-button size="mini" type="text" @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog
      :title="title"
      :visible.sync="handDialogVisible"
      width="30%"
      @close="handleClose"
    >
      <div>
        <p>手型：</p>
        <input
          type="text"
          v-model="form.name"
          class="typeinput"
          placeholder="请输入手型"
        />
      </div>
      <div>
        <p>大图标：</p>
        <imageUpload
          ref="img1"
          :limit="1"
          :multiple="false"
          v-model="form.img1"
          :isShowTip="false"
          @input="img1input"
        />
      </div>
      <div>
        <p>小图标：</p>
        <imageUpload
          ref="img2"
          :limit="1"
          :multiple="false"
          v-model="form.img2"
          :isShowTip="false"
          @input="img2input"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirmAddOrEditHand"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getHandList, addHand, editHand, deletaHand } from "@/api/shape";
export default {
  data() {
    return {
      list: [],
      loading: true,
      title: "新增手型信息",
      handDialogVisible: false,
      form: {
        name: "",
        img1: "",
        img2: "",
        type: 1, //1手型2脸型
      },
      isEdit: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      loading: true,
      tableHeight: 0
    };
  },
  methods: {
    getList() {
      this.loading = true;
      getHandList(this.queryParams)
        .then((res) => {
          this.list = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    img1input(file) {
      this.form.img1 = file;
    },
    img2input(file) {
      this.form.img2 = file;
    },
    handleAdd() {
      this.isEdit = false;
      this.handDialogVisible = true;
    },
    handleEdit(row) {
      this.isEdit = true;
      this.handDialogVisible = true;
      this.form = {
        id: row.id,
        name: row.name,
        img1: row.img1,
        img2: row.img2,
        type: row.type,
      };
      this.$nextTick(() => {
        this.$refs["img1"].handleEdit({ url: row.img1 });
        this.$refs["img2"].handleEdit({ url: row.img2 });
      });
    },
    handleConfirmAddOrEditHand() {
      if (!this.isEdit) {
        addHand(this.form).then((res) => {
          this.msgSuccess("新增成功");
          this.handDialogVisible = false;
          this.getList();
        });
      } else {
        editHand(this.form).then((res) => {
          this.msgSuccess("修改成功");
          this.handDialogVisible = false;
          this.getList();
        });
      }
    },
    handleClose() {
      this.form = {
        name: "",
        img1: "",
        img2: "",
        type: 1, //1手型2脸型
      };
      this.$refs["img1"].clearFile();
      this.$refs["img2"].clearFile();
    },
    handleDelete(id) {
      this.$confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deletaHand(id).then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          });
        })
        .catch(() => {});
    },
    calHeight () {
          this.$nextTick(() => {
              const rect = this.$refs.appcontainer.getBoundingClientRect();
              // let height= this.$refs.queryForm.$el.offsetHeight;
              this.tableHeight = rect.height-120;
          })
      },
  },
  mounted() {
    this.getList();
    this.calHeight()
  },
};
</script>
<style>
.typeinput {
  width: 200px;
  height: 40px;
  border: 1px solid #999999;
  outline: 0;
  border-radius: 5px;
  box-sizing: border-box;
  padding-left: 10px;
}
</style>